<template>
  <div id="app">
    <div id="nav" v-if="this.$route.meta.ShowOrHidden">
      <router-link to="/" class="nav-txt" >推荐音乐</router-link>
      <router-link to="/about" class="nav-txt" >歌手榜</router-link>
      <router-link to="/search" class="nav-txt">搜索</router-link>
    </div>
    <router-view/>
    <Test/>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import Test from '@/components/test/Test.vue'



export default {
  name: 'App',
  components: {
    Test
  }
}
</script>

<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
#nav
  display flex
.nav-txt{
  color #000
  font-size 23px
  letter-spacing 2px
  text-decoration none 
  flex 1
}
#nav a.router-link-exact-active{
  color:#ff0000;
  border-bottom: 3px solid  #ff0000;
}


</style>
